<template>
  <my-dialog :mode="props.mode" title="Asset relation" :submit="onOk">
    <q-card-section>
      <div class="q-pa-sm">
        <div class="q-gutter-y-sm row">
          <q-item-label class="col-4 fal"
            >Equipment Class:<span style="color: red">*</span></q-item-label
          >
          <q-select
            borderless
            v-model="equipmentClass"
            input-debounce="0"
            use-input
            hide-bottom-space
            lazy-rules
            :options="inputOptionStore.data.equipmentClass"
            class="col-8 fal input-css"
            :dense="true"
            @filter="epClassFilterFn"
          >
          </q-select>
         
          <q-item-label class="col-4 fal"
            >Level 1:<span style="color: red">*</span></q-item-label
          >
          <q-select
            borderless
            v-model="lv1"
            input-debounce="0"
            hide-bottom-space
            lazy-rules
            :options="inputOptionStore.data.lv1"
            class="col-8 fal input-css"
            :dense="true"
          >
          </q-select>

          <q-item-label class="col-4 fal"
            >Level 2:<span style="color: red">*</span></q-item-label
          >
          <q-select
            borderless
            v-model="lv2"
            input-debounce="0"
            hide-bottom-space
            lazy-rules
            :options="inputOptionStore.data.lv2"
            class="col-8 fal input-css"
            :dense="true"
          >
          </q-select>

          <q-item-label class="col-4 fal"
            >Level 3:<span style="color: red">*</span></q-item-label
          >
          <q-select
            borderless
            v-model="lv3"
            input-debounce="0"
            hide-bottom-space
            lazy-rules
            :options="inputOptionStore.data.lv3"
            class="col-8 fal input-css"
            :dense="true"
          >
          </q-select>

          <q-item-label class="col-4 fal"
            >Level 4:<span style="color: red">*</span></q-item-label
          >
          <q-select
            borderless
            v-model="lv4"
            input-debounce="0"
            hide-bottom-space
            use-input
            lazy-rules
            :options="inputOptionStore.data.lv4"
            @filter="lv4FilterFn"
            class="col-8 fal input-css"
            :dense="true"
          >
          </q-select>

          <q-item-label class="col-4 fal">Level 5:</q-item-label>
          <q-select
            borderless
            v-model="lv5"
            input-debounce="0"
            hide-bottom-space
            lazy-rules
            :options="inputOptionStore.data.lv5"
            use-input
            @filter="lv5FilterFn"
            class="col-8 fal input-css"
            :dense="true"
          >
          </q-select>

          <!-- <q-item-label class="col-4 fal"
            >Level 5 Equipment Class:</q-item-label
          >
          <q-input
            borderless
            v-model="lv5EquipmentClass"
            input-debounce="0"
            hide-bottom-space
            lazy-rules
            class="col-8 fal input-css"
            :dense="true"
          >
          </q-input> -->
        </div>
      </div>
    </q-card-section>
  </my-dialog>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import MyDialog from 'src/components/container/MyDialog.vue';
import { useQuasar } from 'quasar';
import { useInputOption } from 'src/stores/inputOptionStore';
import {
  createAssetRelation,
  editAssetRelation,
getCurAssetRelation,
} from 'src/services/eqipmentService';

const props = defineProps<{
  mode: 'create' | 'edit';
  id?: number;
}>();

const inputOptionStore = useInputOption();
inputOptionStore.init();
const emit = defineEmits(['update']);

const lv4 = ref('');
const lv5 = ref('');
const lv1 = ref('');
const lv2 = ref('');
const lv3 = ref('');
const equipmentClass = ref('');
const lv5EquipmentClass = ref('')
const $q = useQuasar();

const eqClassStringOptions = ref<string[]>([]);
const lv4StringOptions = ref<string[]>([]);
const lv5StringOptions = ref<string[]>([]);

setTimeout(() => {
  eqClassStringOptions.value = [...inputOptionStore.data.equipmentClass]
  lv4StringOptions.value = [...inputOptionStore.data.lv4]
  lv5StringOptions.value = [...inputOptionStore.data.lv5]
}, 500);


async function onEdit() {
  if (
    equipmentClass.value == '' ||
    lv1.value == '' ||
    lv2.value == '' ||
    lv3.value == '' ||
    lv4.value == ''
  ) {
    $q.notify({
      message: 'Check Require Field',
      color: 'negative',
    });
    return;
  }
  if (props.id) {
    const res = await editAssetRelation(
      props.id,
      equipmentClass.value,
      lv1.value,
      lv2.value,
      lv3.value,
      lv4.value,
      lv5.value
    );
    try {
      if (res) {
        $q.notify({
          message: 'success',
          color: 'positive',
        });
        emit('update');
      }
    } catch (error) {
      console.log(error);
    }
  }
}

async function onCreate() {
  try {
    if (
      equipmentClass.value == '' ||
      lv1.value == '' ||
      lv2.value == '' ||
      lv3.value == '' ||
      lv4.value == ''
    ) {
      $q.notify({
        message: 'Check Require Field',
        color: 'negative',
      });
      return;
    }
    const res = await createAssetRelation(
      equipmentClass.value,
      lv1.value,
      lv2.value,
      lv3.value,
      lv4.value,
      lv5.value
    );
    if (res) {
      $q.notify({
        message: 'success',
        color: 'positive',
      });
      onClear();
      emit('update');
    }
  } catch (error) {
    console.log(error);
  }
}

async function onOk() {
  if (props.mode == 'create') {
    onCreate();
  }
  if (props.mode == 'edit') {
    onEdit();
  }
}

/* watch(
  () => equipmentClass.value + '-' + lv5.value,
  (sum) => {
    if (lv5.value != ''){
      lv5EquipmentClass.value = sum
    }
  }
) */

async function getCurAssetData(id: number) {
  const res = await getCurAssetRelation(id);
  if (res) {
    equipmentClass.value = res.equipment_class;
    lv1.value = res.lv1;
    lv2.value = res.lv2;
    lv3.value = res.lv3;
    lv4.value = res.lv4;
    lv5.value = res.lv5;
  }
}

if (props.mode == 'edit' && props.id) {
  getCurAssetData(props.id);
}

function onClear() {
  equipmentClass.value = '';
  lv1.value = '';
  lv2.value = '';
  lv3.value = '';
  lv4.value = '';
  lv5.value = '';
}

function lv4FilterFn(val: string, update: any) {
  if (val === '') {
    update(() => {
      inputOptionStore.data.lv4 = [...lv4StringOptions.value];
    });
    return;
  }

  update(() => {
    const needle = val.toLowerCase();
    inputOptionStore.data.lv4 = lv4StringOptions.value.filter(
      (v: string) => v.toLowerCase().indexOf(needle) > -1
    );
  });
}

function lv5FilterFn(val: string, update: any) {
  if (val === '') {
    update(() => {
      inputOptionStore.data.lv5 = [...lv5StringOptions.value];
    });
    return;
  }

  update(() => {
    const needle = val.toLowerCase();
    inputOptionStore.data.lv5 = lv5StringOptions.value.filter(
      (v: string) => v.toLowerCase().indexOf(needle) > -1
    );
  });
}

function epClassFilterFn(val: string, update: any) {
  if (val === '') {
    update(() => {
      inputOptionStore.data.equipmentClass = [...eqClassStringOptions.value];
    });
    return;
  }

  update(() => {
    const needle = val.toLowerCase();
    inputOptionStore.data.equipmentClass = eqClassStringOptions.value.filter(
      (v: string) => v.toLowerCase().indexOf(needle) > -1
    );
  });
}
</script>
